<!-- 气泡容器 -->
<template>
  <div ref="bubblesContainer">
    <slot name="container"></slot>
    <div ref="bubbles" style="display: none;">
      <slot name="bubbles"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
/** JS */
import {ref, reactive, nextTick, onMounted, defineProps, PropType, watch} from 'vue';
import Tips from '@/utils/js/Tips.export.js';
// 定位配置
type Position = 'auto' | 'left' | ' right' | 'top' | 'bottom';
// 仅在position为top和bottom有效
type HorizontalAlign = 'center' | 'left' | 'right';
// 仅在position为left和right有效
type VerticalAlign = 'middle' | 'top' | 'bottom';
type BubblesConfig = {
  // 气泡框内容，function 类型
  content: () => any
  // 气泡框宽度
  width?: string
  // 气泡框高度
  height?: string
  // 气泡框最小宽度
  minWidth?: string
  // 气泡最小高度
  minHeight?: string
  // 气泡最大宽度
  maxWidth?: string
  // 气泡最大高度
  maxHeight?: string
  // 字体颜色
  color?: string
  // 背景颜色
  backgroundColor?: string
  // 气泡框位置，可选值有auto|top|right|bottom|left
  position?: Position
  // 水平对齐，可选值有center|left|right
  horizontalAlign?: HorizontalAlign
  // 垂直对齐，可选值有middle|top|bottom
  verticalAlign?: VerticalAlign
  // 气泡框显示时长，单位ms，默认100s
  duration?: number
  // 气泡框边框大小，为0无边框，默认为0
  borderWidth?: number
  // 气泡框边框颜色，默认值#ccc
  borderColor?: string
  // 气泡框圆角，默认5px
  borderRadius?: string
  // 自定义点击事件
  clickFn?: () => any
  // 携参
  data?: any
}

const bubblesContainer = ref(null), bubbles = ref(null)
const props = defineProps<{
  // 气泡框内容，function 类型
  content?: () => any
  // 气泡框宽度
  width?: string
  // 气泡框高度
  height?: string
  // 气泡框最小宽度
  minWidth?: string
  // 气泡最小高度
  minHeight?: string
  // 气泡最大宽度
  maxWidth?: string
  // 气泡最大高度
  maxHeight?: string
  // 字体颜色
  color?: string
  // 背景颜色
  backgroundColor?: string
  // 气泡框位置，可选值有auto|top|right|bottom|left
  position?: Position
  // 水平对齐，可选值有center|left|right
  horizontalAlign?: HorizontalAlign
  // 垂直对齐，可选值有middle|top|bottom
  verticalAlign?: VerticalAlign
  // 气泡框显示时长，单位ms，默认100s
  duration?: number
  // 气泡框边框大小，为0无边框，默认为0
  borderWidth?: number
  // 气泡框边框颜色，默认值#ccc
  borderColor?: string
  // 气泡框圆角，默认5px
  borderRadius?: string
  // 自定义点击事件
  clickFn?: (ev) => any
  // 携参
  data?: any
  // 父组件让子组件刷新 tips
  refresh?: boolean
}>();

function newTips(config: BubblesConfig) {
  nextTick(() => {
    if (bubbles.value) {
      let content = bubbles.value as HTMLElement;
      let tipConfiguration = {
        id: bubblesContainer.value,
        content: content.innerHTML,
        width: config.width,
        height: config.height,
        minWidth: config.minWidth,
        minHeight: config.minHeight,
        maxWidth: config.maxWidth,
        maxHeight: config.maxHeight,
        color: config.color,
        backgroundColor: config.backgroundColor,
        position: config.position,
        horizontalAlign: config.horizontalAlign,
        verticalAlign: config.verticalAlign,
        duration: config.duration,
        borderWidth: config.borderWidth,
        borderColor: config.borderColor,
        borderRadius: config.borderRadius,
        click: config.clickFn,
        data: config.data
      };
      Tips(tipConfiguration);
    }
  })
}

watch(props, (n) => {
  nextTick(() => {
    newTips(n);
  })
})

onMounted(() => {
  nextTick(() => {
    if (bubblesContainer.value && bubbles.value) {
      newTips(props);
    }
  })
})

</script>

<style lang="less" scoped>

</style>
